<template>
  <view class="box">
    <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
    <u-form labelWidth="auto" :model="project">
      <u-form-item label="项目名称" borderBottom>
        <u-input v-model="project.name"></u-input>
      </u-form-item>
      <u-form-item label="项目状态" borderBottom>
        <my-select type-name="project_status" v-model="project.status"></my-select>
      </u-form-item>
      <u-form-item
          label="开始日期"
          borderBottom
          @click="calendarShow = true;"
          ref="item1"
      >
        <u-input disabled v-model="project.startDate"></u-input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>
      <u-form-item
          label="结束日期"
          borderBottom
          @click="calendarShow = true;"
          ref="item1"
      >
        <u-input disabled v-model="project.endDate"></u-input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>
    </u-form>
    <u-button type="primary" text="确定" @click="upData"></u-button>
    <u-calendar mode="range" :show="calendarShow" @close="()=>{calendarShow=false}"
                @confirm="(e)=>{project.startDate=e[0];project.endDate=e[e.length-1]; calendarShow=false}">
    </u-calendar>

  </view>
</template>

<script>
import {getProject, updateProject} from "../../../api/project/project";
import {selectType} from "../../../utils/selectType";
import MySelect from "../../../components/my-select/my-select.vue";


export default {
  components: {MySelect},
  data() {
    return {
      calendarShow: false,
      projectId: null,
      project: {},
    };
  },
  onLoad(options) {
    if (options.projectId) {
      this.projectId = options.projectId;
    }
    this.getData()
  },
  methods: {
    selectType,
    getData() {
      getProject(this.projectId).then(res => {
        this.project = res.data;
      });
    },
    upData() {
      updateProject(this.project).then(response => {
        this.getData();
        uni.showToast({
          title: '修改成功',
          //将值设置为 success 或者直接不用写icon这个参数
          icon: 'success',
          //显示持续时间为 2秒
          duration: 2000
        })
      });
    }
  },
};
</script>
<style>
.box{
  margin: 10rpx;
}
</style>